<template>
  <div class='container'>
    <el-dialog :title="curId?'修改文章':'新增文章'" :visible="isArticles" @close="hClose" width="50%">
       <el-form ref="form" :model="formData" :rules="rules"  label-width="100px" >
          <el-form-item label="文章标题：" prop="title" >
            <el-input v-model="formData.title"></el-input>
          </el-form-item>
          <el-form-item label="文章内容：" prop="articleBody">
            <quill-editor
              class="editor-container"
              v-model="formData.articleBody"
            ></quill-editor>
          </el-form-item>
         <el-form-item label="视频地址：" prop="videoURL">
            <el-input v-model="formData.videoURL" class="select"></el-input>
          </el-form-item>
          <el-form-item class="center">
            <el-button @click="hClose">取消</el-button>
            <el-button type="primary" @click="btnOK">确认</el-button>
          </el-form-item>
       </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import { add, update } from '@/api/hmmm/articles'
export default {
  components: {
    quillEditor
  },
  props: {
    isArticles: {
      type: Boolean,
      required: true
    },

    curId: {
      type: Number,
      required: true
    },

    formData: {
      type: Object,
      default: null
    }

  },
  data () {
    return {
      data: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
      }
    }
  },
  methods: {
    hClose () {
      this.$emit('update:isArticles', false)
    },
    async btnOK () {
      this.data = this.formData
      // 兜底校验
      this.$refs.form.validate(async valid => {
        if (valid) {
          if (this.curId) {
            await update(this.data)
            this.$message.success('修改成功')
          } else {
            // 发送添加请求
            await add(this.data)
            this.$message.success('新增成功')
          }
          this.$emit('getArticleList')
          this.hClose()
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.center{
  transform: translateX(-50px);
  text-align: center;
}
</style>
